<template>
  <div class="login" :style="'height: ' + maxHeight + 'px'">
    <Header title="登录"></Header>

    <div class="head">
      <img src="@/assets/login/head.png" alt="" />
    </div>

    <div class="form">
      <nut-form>
        <nut-form-item>
          <nut-input
            v-model="data.phone"
            clearable
            placeholder="请输入手机号"
            type="number"
          >
            <template #left>
              <img class="icon" src="@/assets/login/phone.png" alt="" />
            </template>
          </nut-input>
        </nut-form-item>
        <nut-form-item>
          <nut-input
            v-model="data.password"
            clearable
            placeholder="请输入密码"
            type="password"
          >
            <template #left>
              <img class="icon" src="@/assets/login/code.png" alt=""
            /></template>
            <!-- <template #right>
              <nut-button class="code" type="default">获取验证码</nut-button>
            </template> -->
          </nut-input>
        </nut-form-item>

        <nut-form-item>
          <nut-button :loading="form.btnLoading" type="primary" @click="login"
            >登录</nut-button
          >
        </nut-form-item>
      </nut-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

const maxHeight = ref(`${document.documentElement.clientHeight}` - 45);

const form = reactive({
  btnLoading: false,
});

const data = reactive({
  phone: "13000000000",
  password: "123456",
});

// 登录
const login = () => {
  if (data.phone == "") {
    proxy.$showToast.fail("请输入手机号");
    return;
  }
  if (data.password == "") {
    proxy.$showToast.fail("请输入密码");
    return;
  }

  form.btnLoading = true;
  proxy.$authApi.login
    .loginWithPhone(data)
    .then((res) => {
      form.false = true;
      proxy.$userUtils.setUser(res.data);
      proxy.$showToast.text("登录成功", {
        duration: 1000,
      });
      proxy.$cartUtils.refreshCartList();
      router.back();
    })
    .catch((error) => {
      form.btnLoading = false;
    });
};
</script>

<style lang="less" scoped>
.login {
  margin-top: 45px;
  width: 100%;
  overflow-x: hidden;
  background: url(@/assets/login/top_bg.png) top left no-repeat;
  background-size: 100%;
  .head {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
  }
  .nut-form {
    margin: 100px 20px 0px 20px;
    .nut-button {
      width: 100%;
      height: 45px;
      border-radius: 5px;
    }
    .code {
      font-size: 12px;
      margin-bottom: 15px;
      border-radius: 5px;
      padding: 5px;
    }
    .icon {
      width: 25px;
      height: 25px;
    }
    :deep(.nut-input-inner) {
      height: 40px;
    }
    :deep(.nut-input-box) {
      margin-left: 5px;
      input {
        font-size: 13px;
      }
    }
  }
}
</style>